<template>
  <div class="part-curriculum">
    <div
      class="banner"
      :style="`background-image:url(${curriculum.cover})`"
    >
    </div>
    <div
      class="timediscount"
      v-if="query"
    >
      <div class="flex">
        <!-- <div class="wid"></div> -->
        <!-- <div class="skew"></div> -->
        <div class="pos">
          <span>￥</span>
          <span>{{query.money/100}}</span>
          <div>
            <section>¥{{query.y_money/100}}</section>
            <div>
              限时特惠
            </div>
          </div>

        </div>

      </div>
      <div class="flex">
        <div class="wid"></div>
        <div class="skew"></div>
        <div class="pos">
          <p>距结束仅剩</p>
          <p><span>{{days}}</span>天<span>{{hours}}</span>时<span>{{minutes}}</span>分<span>{{seconds}}</span>秒</p>
        </div>
      </div>
    </div>
    <div
      class="price-box"
      v-if="curriculum.assemble_money && curriculum.scribing_money"
    >
      <div class="price-money"><span>￥</span><span>{{curriculum.assemble_money}}</span></div>
      <div class="momo">
        <div>¥{{curriculum.scribing_money}}</div>
        <section>{{curriculum.number}}人团</section>
      </div>
      <div class="price-text">
        拼团听课
      </div>
    </div>
    <section class="details">
      <!-- <p v-if="curriculum.assemble_money && curriculum.scribing_money">
        <span class="details-money">￥{{curriculum.assemble_money}}</span>
        <span class="details-del-money">¥{{curriculum.scribing_money}}</span>
        <span class="money-describe">拼课价</span>
      </p> -->
      <div class="txt">
        <div>{{curriculum.title}}</div>
      </div>
      <div class="txt-ibs">
        <img
          src="https://o6wndwjxn.qnssl.com/%E8%AF%BE%E6%97%B6@2x.png"
          style="width:15px;height:15px;"
        >
        <span
          class="span1"
          v-if="curriculum.chapter"
        >共{{curriculum.chapter}}课时</span>
        <span
          class="span1"
          v-if="query && query.chapter_count"
        >共{{query.chapter_count}}课时</span>
        <img
          src="https://o6wndwjxn.qnssl.com/%E5%AD%A6%E4%B9%A0%E6%AC%A1%E6%95%B0@2x.png"
          style="width:15px;height:15px; margin-left: 6px;"
        >
        <span
          class="span1"
          style="margin-right:15px"
        >{{click_number}}次学习</span>
        <!-- <span
          class="span2"
          v-if="curriculum.number"
        >{{curriculum.number}}人成团</span> -->
      </div>
    </section>
  </div>

</template>

<script>
export default {
  props: ['curriculum', 'line', 'query', 'click_number', 'positionStyle'],
  data () {
    return {
      state: false,
      days: '0',
      hours: '0',
      minutes: '0',
      seconds: '0'
    }
  },
  watch: {
    positionStyle (newValue) {
      this.state = this.positionStyle
    }
  },
  created () {
    if (this.query !== undefined) {
      // console.log(123)
      // console.log(this.query)
      // console.log(123)
      this.times()
    }
  },
  methods: {
    times () {
      let endTime = this.query.end_time
      // console.log(endTime)
      let terval = setInterval(() => {
        let end = new Date(endTime * 1000) // 结束时间
        let start = new Date() // 当前时间
        let totalSeconds = parseInt((end - start) / 1000) // 时间差
        if (totalSeconds < 0) {
          let _this = this
          this.$vux.alert.show({
            title: '提示',
            content: '此限时课程优惠已结束',
            onHide () {
              _this.$router.push({
                path: '/home'
              })
            }
          })
        }
        // 天数
        if (totalSeconds > 0) {
          let days = Math.floor(totalSeconds / (60 * 60 * 24))
          // 剩余时间
          var modulo = totalSeconds % (60 * 60 * 24)
          // 小时数
          var hours = Math.floor(modulo / (60 * 60))
          modulo = modulo % (60 * 60)
          // 分钟
          var minutes = Math.floor(modulo / 60)
          // 秒
          var seconds = modulo % 60
          if (days <= 9) days = '0' + days
          if (hours <= 9) hours = '0' + hours
          if (minutes <= 9) minutes = '0' + minutes
          if (seconds <= 9) seconds = '0' + seconds
          this.days = days
          this.hours = hours
          this.minutes = minutes
          this.seconds = seconds
        } else {
          clearInterval(terval)
          // alert('优惠结束')
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.price-box {
  width: 100%;
  height: 45px;
  background-color: #fcc;
  display: flex;
  background-image: url("https://o6wndwjxn.qnssl.com/%E6%8B%BC%E5%9B%A2@2x.png");
  background-size: cover;
  position: relative;
  .price-money {
    font-family: PingFangSC-Semibold;
    font-size: 12px;
    color: #ffffff;
    margin-left: 16px;
    span:nth-of-type(2) {
      font-family: PingFangSC-Semibold;
      font-size: 31px;
    }
  }
  .momo {
    color: #ffffff;
    margin-left: 5px;
    display: flex;
    height: 100%;
    position: relative;
    div {
      font-family: PingFangSC-Regular;
      text-decoration: line-through;
      font-size: 10px;
      line-height: 20px;
      position: absolute;
      bottom: 8px;
    }
    section {
      width: 45px;
      height: 18px;
      line-height: 18px;
      border: solid 1px #fff;
      border-radius: 9px;
      text-align: center;
      margin-right: 8px;
      position: absolute;
      bottom: 13px;
      left: 30px;
    }
  }
  .price-text {
    text-align: right;
    flex: 1;
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    height: 100%;
    line-height: 45px;
    color: #da4131;
    margin-right: 30px;
  }
}
.banner {
  width: 100%;
  height: 211px;
  background-color: #abcdef;
  position: relative;
  font-family: PingFangSC-Regular;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.details {
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;
  p {
    margin-bottom: 12px;
    font-size: 0px;
    width: 100%;
    height: 45px;
    .details-money {
      font-size: 24px;
      color: #da4131;
      display: inline-block;
      margin-right: 8px;
    }
    .details-del-money {
      font-size: 12px;
      color: #fc7171;
      text-decoration: line-through;
    }
    .money-describe {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #fc7171;
      margin-left: 10px;
    }
  }
  .txt {
    display: flex;
    padding-bottom: 10px;
    div:last-of-type {
      flex: 1;
    }
    div:first-of-type {
      font-size: 16px;
      letter-spacing: 0px;
      color: #333333;
      font-weight: 900;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /* -webkit-box-orient: vertical; */
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .Presenter {
      position: relative;
      span {
        display: inline-block;
        width: 73px;
        height: 25px;
        border-radius: 24px;
        border: solid 1px #da4131;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        color: #da4131;
        position: absolute;
        right: 0;
      }
    }
  }
  .txt-ibs {
    margin-top: 12px;
    font-size: 0px;
    display: flex;
    justify-items: center;
    span {
      display: inline-block;
    }
    .span1 {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999999;
      margin-right: 5px;
      margin-left: 5px;
    }
    .span2 {
      display: inline-block;
      font-size: 10px;
      padding: 0px 6px;
      height: 18px;
      line-height: 18px;
      border-radius: 12px;
      border: solid 1px #da4131;
      color: #da4131;
    }
  }
}
.line {
  width: 100%;
  height: 10px;
  background-color: #f8f8f8;
}
.timediscount {
  width: 100%;
  height: 45px;
  display: flex;
  overflow-x: hidden;
  background-image: url("https://o6wndwjxn.qnssl.com/%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0@2x.png");
  background-size: cover;
  .flex:first-of-type {
    flex: 1;
    position: relative;
    .wid {
      background-color: #ffdede;
      width: 50%;
      height: 100%;
    }
    .skew {
      width: 100%;
      height: 100%;
      background-color: #ffdede;
      transform: skewX(-55deg);
      position: absolute;
      left: 0;
      top: 0;
    }
    .pos {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 20;
      display: flex;
      align-items: center;
      span:first-of-type {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #da4131;
        display: inline-block;
        margin-left: 12px;
        position: relative;
        top: 3px;
      }
      span:nth-of-type(2) {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #da4131;
        display: inline-block;
        margin-right: 7px;
      }
      div {
        height: 100%;
        section {
          font-family: PingFangSC-Regular;
          font-size: 10px;
          color: #da4131;
          line-height: 23px;
          text-indent: 10px;
          text-decoration: line-through;
        }
        div {
          width: 60px;
          height: 18px;
          line-height: 17px;
          text-align: center;
          border-radius: 9px;
          border: solid 1px #da4131;
          color: #da4131;
        }
      }
      span:nth-of-type(3) {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #fc7171;
      }
    }
  }
  .flex:last-of-type {
    flex: 1;
    position: relative;
    .wid {
      // background-color: #ffa9a9;
      width: 50%;
      height: 100%;
      position: absolute;
      right: 0;
    }
    .skew {
      width: 100%;
      height: 100%;
      // background-color: #ffa9a9;
      transform: skewX(-55deg);
      position: absolute;
      right: 0;
      top: 0;
    }
    .pos {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 20;
      p:first-of-type {
        position: absolute;
        right: 15px;
        top: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #da4131;
        font-weight: bold;
      }
      p:last-of-type {
        position: absolute;
        right: 15px;
        bottom: 5px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #da4131;
        span {
          display: inline-block;
          width: 17px;
          height: 17px;
          background-color: #333333;
          border-radius: 6px;
          line-height: 17px;
          color: #fff;
          text-align: center;
          margin: 0 5px;
        }
        span:first-of-type {
          width: auto;
          height: auto;
          padding: 0 2px;
        }
      }
    }
  }
}
</style>
